/** * @description: 行为失范预警 */
<template>
  <div class="pub-container">
    <!-- 行为失范预警 -->
    <PieEchart2
      v-if="isApiComp"
      pieShowId="warningNums"
      :optionData="warningData"
      :colorList="warningColorList"
      pieTitleText="预警总人数"
      titleText="行为失范预警"
    />

    <!-- 寝室异常上报 -->
    <PieEchart
      v-if="isApiComp"
      pieShowId="bedroomReport"
      :optionData="bedroomReportData"
      :colorList="bedroomReportColorList"
      :lengendPlace="bedroomReportLengendPlace"
      pieTitleText="总上报次数"
      titleText="寝室异常上报"
    />

    <!-- 各学院分布 -->
    <div class="floor">
      <div class="title">各学院分布</div>
      <CollegeWarning :collegeWarningList="collegeWarningList" type="behavior" />
    </div>
  </div>
</template>

<script>
import { warningBehavior } from '@/api/warning'
import PieEchart from '@/components/pieEchart'
import PieEchart2 from '@/components/pieEchart2'
import CollegeWarning from './components/collegeWarning'
export default {
  name: 'BehaviorAnomie',
  components: { PieEchart, PieEchart2, CollegeWarning },
  data() {
    return {
      isApiComp: false,
      warningObj: {}, //行为失范预警
      warningData: [
        { name: '一级', value: '' },
        { name: '二级', value: '' },
        { name: '三级', value: '' },
      ],
      warningColorList: ['#FF7357', '#FFE032', '#2E6CF6'],

      //寝室异常上报
      bedroomReportData: [
        { name: '异常事件', value: '' },
        { name: '晚归事件', value: '' },
        { name: '未归事件', value: '' },
      ],
      bedroomReportLengendPlace: { top: '30%', left: '62%' },
      bedroomReportColorList: ['#58F1BA', '#2E6CF6', '#737CFF'],

      collegeWarningList: [], //各学院分布

      params: {
        //筛选条件
        startDate: undefined,
        endDate: undefined,
      },
    }
  },
  created() {
    this.getWarningBehavior()

    //筛选触发
    this.$bus.on('warningStuDbs', (startDate, endDate) => {
      this.params.startDate = startDate
      this.params.endDate = endDate

      this.warningObj = {}
      this.warningData = [
        { name: '一级', value: '' },
        { name: '二级', value: '' },
        { name: '三级', value: '' },
      ]
      this.bedroomReportData = [
        { name: '异常事件', value: '' },
        { name: '晚归事件', value: '' },
        { name: '未归事件', value: '' },
      ]
      this.collegeWarningList = []

      this.getWarningBehavior()
    })
  },
  methods: {
    //行为失范预警
    async getWarningBehavior() {
      try {
        const { data } = await warningBehavior({ ...this.params })
        this.warningObj = data.data

        //行为失范预警
        this.warningData[0].value = data.data.oneWarningNums || 0
        this.warningData[1].value = data.data.twoWarningNums || 0
        this.warningData[2].value = data.data.threeWarningNums || 0

        //寝室异常上报
        this.bedroomReportData[0].value = data.data.abnormalNums || 0
        this.bedroomReportData[1].value = data.data.lateNums || 0
        this.bedroomReportData[2].value = data.data.notReturnedNums || 0

        //各学院分布
        this.collegeWarningList = data.data.subList
        this.isApiComp = true
      } catch (e) {
        console.log(e)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.floor {
  background: $bg-white;
  padding: 20px 12px;
  border-radius: 10px;
  margin-top: 12px;
  padding-bottom: 0;
  .title {
    font-size: $fz16;
    color: $color-title;
    font-weight: normal;
    margin-bottom: 15px;
  }
}
</style>
